<!doctype html>
<html class="no-js no-treesaver">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,minimum-scale=1,maximum-scale=1">
    <title>Treesaver Menu</title>
    <link rel="resources" href="resources.html">
    <link rel="stylesheet" href="../treesaver.css">
    <script src="../../lib/mustache/mustache.js"></script>
    <script src="../../lib/closure/goog/base.js"></script>
    <script src="../../test/deps.js"></script>
    <script>
      goog.require('treesaver');
    </script>
    <style>
      .controls {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
      }

      .menu {
        display: inline-block;
        position: absolute;
      }

      .menu.menu-active ul {
        display: block;
      }

      .menu ul {
        padding: 0;
        margin: 0;
        list-style-type: none;
        display: none;
        position: absolute;
        bottom: 20px;
        right: 0px;
      }

      .menu li {
        border: 1px solid rgb(180, 180, 180);
      }

      .rightMenu {
        bottom: 0;
        right: 0;
      }

      .leftMenu {
        bottom: 0;
        left: 0;
      }
    </style>
  </head>

  <body>
    <article>
      <p>This markup is an example of using multiple menus.</p>
    </article>
  </body>
</html>
